<template>
  <a-card>
    <div class="main">
      <div class="main-content dev">
        <div class="main-top row">
          <div class="top-title" @click="getAllDev"><a-icon type="control" /> 设备组态 <span><a-icon type="reload" /></span></div>
          <div class="top-des">所有设备组态信息</div>
        </div>
        <div class="main-body row">
          <div class="card-list">
            <a-list
                :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
                :dataSource="devVisualList"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <template>
                  <a-card :hoverable="true">
                    <a-card-meta>
                      <div style="margin-bottom: 3px" slot="title" :style="{'color': theme.color}">{{item.name}}</div>
                      <div class="meta-content" slot="description">园区名称: {{item.farmName}}</div>
                      <div class="meta-content" slot="description">地块名称: {{item.greenHouseName}}</div>
                      <div class="meta-content" slot="description">设备名称: {{item.devName}}</div>
                      <div class="meta-content" slot="description">设备编号: {{item.devCode}}</div>
                      <div class="meta-content status-name" :class="{'on': item.status == 'online'}" slot="description">
                        <span>设备状态: </span>
                        <span class="status">{{item.status === 'online' ? '在线' : '离线'}}</span>
                      </div>
                      <div class="meta-content" slot="description">设备类型: {{disTypeName(item.disType)}}</div>
                      <div class="meta-content" slot="description">创建时间: {{timeFormat(item.createdTime)}}</div>
                    </a-card-meta>
                    <a slot="actions" @click="showVisual(item)">查看</a>
                  </a-card>
                </template>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
      <div class="main-content farm">
        <div class="main-top row">
          <div class="top-title" @click="getAllFarm"><a-icon type="credit-card" /> 园区组态 <span><a-icon type="reload" /></span></div>
          <div class="top-des">所有园区项目组态信息</div>
        </div>
        <div class="main-body row">
          <div class="card-list">
            <a-list
                :grid="{gutter: 24, lg: 4, md: 3, sm: 1, xs: 1}"
                :dataSource="farmVisualList"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <template>
                  <a-card :hoverable="true">
                    <a-card-meta>
                      <div style="margin-bottom: 3px" slot="title" :style="{'color': theme.color}">{{item.name}}</div>
                      <div class="meta-content" slot="description">园区名称: {{item.farmName}}</div>
                      <div class="meta-content" slot="description">设备类型: {{disTypeName(item.disType)}}</div>
                      <div class="meta-content" slot="description">创建时间: {{timeFormat(item.createdTime)}}</div>
                    </a-card-meta>
                    <a slot="actions" @click="showVisual(item)">查看</a>
                  </a-card>
                </template>
              </a-list-item>
            </a-list>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import {mapState} from 'vuex'
import moment from "moment";
import {listAll} from "@/services/dev";
import {list} from "@/services/farm"
import {listByDev, listByFarm} from "@/services/visual";

export default {
  name: "Info",
  data() {
    return {
      isDevVisualEmpty: false,
      isFarmVisualEmpty: false,
      devList: [],
      devVisualList: [],
      farmVisualList: [],
      farmList: []
    }
  },
  computed: {
    ...mapState('setting', ['theme']),
    disTypeName(e) {
      return e => {
        return e ? '手机' : '电脑'
      }
    },
    timeFormat(e) {
      return e => {
        return moment(e).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  },
  created() {
    this.getAllDev()
    this.getAllFarm()
  },
  methods: {
    async getAllDev() {
      const res = await listAll()
      this.devList = res.Data
      const devList = res.Data.map(item => {
        return item.DevCode
      })
      await this.getVisualListByDev(devList)
    },
    //独立组态
    async getAllFarm() {
      const res = await list()
      const farmList = res.Data.map(item => {
        return item.FarmId
      })
      this.farmList = res.Data
      await this.getVisualListByFarm(farmList)
    },
    async getVisualListByDev(devCodeList) {
      const res = await listByDev({
        devCodeList
      })
      if(res.datas.length == 0) {
        this.isDevVisualEmpty = true
      } else {
        this.devVisualList = res.datas.map(item => {
          const detail = this.devList.find(v => v.FarmId == item.farmId)
          return {
            name: item.name,
            keycode: item.keycode,
            devCode: item.devCode,
            description: item.description,
            devModelId: item.devModelId,
            disType: item.disType,
            farmId: item.farmId,
            farmName: detail.FarmName,
            greenHouseName: detail.GreenHouseName,
            devName: detail.DevName,
            status: detail.Status,
            createdTime: item.createdTime
          }
        })
      }
    },
    async getVisualListByFarm(farmIdList) {
      const res = await listByFarm({
        farmIdList
      })
      if(res.datas.length == 0) {
        this.isFarmVisualEmpty = true
      } else {
        this.farmVisualList = res.datas.map(item => {
          const detail = this.farmList.find(v => v.FarmId == item.farmId)
          return {
            name: item.name,
            keycode: item.keycode,
            devCode: item.devCode,
            description: item.description,
            devModelId: item.devModelId,
            disType: item.disType,
            farmId: item.farmId,
            farmName: detail.FarmName,
            createdTime: item.createdTime
          }
        })
      }
    },
    showVisual(obj) {
      window.open("visual/show.html?keyCode="+obj.keycode);
    }
  }
}
</script>

<style scoped lang="less">
.main {
  .main-content {
    border: 1px dashed #eee;
    padding: 10px;
    margin: 0 0 10px 0;
    .main-top {
      background: #f0f0f0;
      border-radius: 3px;
      padding: 10px;
      .top-title {
        font-size: 20px;
      }
      .top-des {
        margin: 5px 0 0 0;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .main-body {
      margin: 10px 0 0 0;
    }
  }
  .dev {
    .main-top {
      .top-title {
        color: #fa541c;
      }
    }
  }
  .farm {
    .main-top {
      .top-title {
        color: #f5222d;
      }
    }
  }
}
.status-name {
  .status {
    color: #dd6161;
  }
}
.on {
  .status {
    color: #40A636;
  }
}
</style>
